<template>
	<view class="content">
		<view class="banner">
			<image class="img" src="@/static/icon/iv_case_title.jpg" mode="widthFix"></image>
		</view>
		<view class="navbar">
			<view class="navbar-group">
				<view class="navbar-item" v-for="(menu, index) in menus" :key="index" v-show="menu.show">
					<view class="card" @tap="openPage(menu.url)">
						<text class="card-badge" v-if="menu.value == 'task'">{{count}}</text>
						<view class="card-header">
							<image class="icon" :src="menu.icon"></image>
						</view>
						<view class="card-body">{{ menu.label }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { countCzryTodoEvent, countXjyTodoEvent } from '@/api/configure.js';
	import { getUserInfo } from '@/util/util.js';
	export default {
		data() {
			return {
				count: 0,
				roleKey: '',
				menus: [{
					id: 1,
					label: '查询范围',
					value: 'area',
					icon: require('../../static/icon/iv_track.png'),
					url: '/pages/map/area',
					show: false
				},{
					id: 2,
					label: '我的任务',
					value: 'task',
					icon: require('../../static/icon/iv_mytask.png'),
					url: '/pages/flow/task',
					show: false
				},{
					id: 3,
					label: '历史记录',
					value: 'record',
					icon: require('../../static/icon/iv_an_list.png'),
					url: '/pages/flow/record',
					show: false
				},{
					id: 4,
					label: '呼叫指挥中心',
					value: 'call',
					icon: require('../../static/icon/iv_zhihui.png'),
					url: '/pages/flow/call',
					show: false
				},{
					id: 5,
					label: '考勤打卡',
					value: 'punch',
					icon: require('../../static/icon/iv_qiandao.png'),
					url: '/pages/flow/punch',
					show: false
				},{
					id: 6,
					label: '积水点',
					value: 'jsd',
					icon: require('../../static/icon/iv_water.png'),
					url: '/pages/map/jsd',
					show: false
				},{
					id: 7,
					label: '轨迹查询',
					value: 'track',
					icon: require('../../static/icon/iv_track2.png'),
					url: '/pages/map/track',
					show: false
				},{
					id: 8,
					label: '预警提示',
					value: 'warn',
					icon: require('../../static/icon/iv_yujing.png'),
					url: '/pages/map/warn',
					show: false
				}, {
					id: 9,
					label: '签到查询',
					value: 'sign',
					icon: require('../../static/icon/iv_qiandaomap.png'),
					url: '/pages/map/sign',
					show: false
				}, {
					id: 10,
					label: '人员网格',
					value: 'grid',
					icon: require('../../static/icon/iv_wg.png'),
					url: '/pages/map/grid',
					show: false
				}]
			}
		},
		methods: {
			setMenu() {
				let rolesMenu = []
				let menu = [];
				
				if (this.roleKey == 'czry') {
					menu = ['area','task', 'record', 'punch', 'track'];
				} else if (this.roleKey == 'xjy') {
					menu = ['area', 'task', 'record', 'call', 'punch', 'jsd', 'track', 'warn'];
				} else if(this.roleKey == 'dcy'){
					menu = ['area', 'record', 'call', 'punch', 'jsd', 'track', 'warn', 'sign', 'grid'];
				} else {
					
				}
				
				rolesMenu = [...rolesMenu, ...menu];
				
				this.menus.forEach(menu => {
					if(rolesMenu.includes(menu.value)) {
						menu.show = true;
					}
				})
			},
			openPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			init() {
				let pushId = this.$store.getters['push/getPushId'];
				let userInfo = getUserInfo();
							
				if (userInfo) {
					let data = {
						userId: userInfo.userId
					}
					
					this.roleKey = userInfo['roles'][0]['roleKey'];
					
					this.setMenu();
					this.getTodoEventCount(data);
				}
			},
			async getTodoEventCount(params) {
				let {data} = this.roleKey == 'czry' ? await countCzryTodoEvent(params) : await countXjyTodoEvent(params);
				
				this.count = data;
			},
			
		},
		onLoad() {
			this.init();
			uni.$on('flow.flow.refresh', this.init);
		},
		onUnload() {
			uni.$off('flow.flow.refresh');
		},
		onShow(){
			
		}
	}
</script>

<style lang="scss">
	.banner {
		height: auto;

		.img {
			width: 100%;
		}
	}

	.navbar {
		padding: 10rpx;

		.navbar-group {
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.navbar-item {
				padding: 20rpx;
				width: 33.33%;
				box-sizing: border-box;
				position: relative;
				top: 0rpx;
				left: 0rpx;

				&:after {
					content: "";
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					border: 1rpx solid #bdbdbd;
					transform: scale(.5);
					transform-origin: 0 0;
					box-sizing: border-box;
					opacity: 0.382;
				}
			}
		}
	}

	.card {
		margin: 10rpx;
		position: relative;
		top: 0rpx;
		left: 0rpx;
		z-index: 2;

		.card-header {
			width: 100rpx;
			height: 100rpx;
			margin: 0rpx auto 10rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		.card-body {
			font-size: 24rpx;
			text-align: center;
			color: #5d5d5d;
		}

		.card-badge {
			position: absolute;
			top: 50%;
			left: 50%;
			height: 32rpx;
			width: 32rpx;
			font-size: 24rpx;
			line-height: 120%;
			text-align: center;
			border-radius: 16rpx;
			background-color: #d81e06;
			color: #fff;
			z-index: 9;
			margin-top: -72rpx;
			margin-left: 32rpx;
		}
	}
</style>
